<template>
  <div>
    <tableItem :biaotou="biaotou" :tableData="tableData">
      <template #button>
        <div class="container-box">
          <div class="container-button"> <span>订单号:</span>
            <div><el-input size="small" style="width: 130px;" v-model="input" placeholder="请输入内容"></el-input></div>
          </div>
          <div class="container-button"> <span>销售渠道:</span>
            <div><el-select clearable style="width: 130px;" v-model="value" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select></div>
          </div>
          <div class="container-button"> <span>售票员:</span>
            <div><el-input size="small" style="width: 130px;" v-model="input" placeholder="请输入内容"></el-input></div>
          </div>
          <div class="container-button"> <span>联系人:</span>
            <div><el-input size="small" style="width: 130px;" v-model="input" placeholder="请输入内容"></el-input></div>
          </div>
          <div class="container-button"> <span>电话:</span>
            <div><el-input size="small" style="width: 130px;" v-model="input" placeholder="请输入内容"></el-input></div>
          </div>
          <div class="container-button"> <span>订单状态:</span>
            <div><el-input size="small" style="width: 130px;" v-model="input" placeholder="请输入内容"></el-input></div>
          </div>
          <div class="container-button"> <span>姓名:</span>
            <div><el-input size="small" style="width: 130px;" v-model="input" placeholder="请输入内容"></el-input></div>
          </div>
          <div class="container-button"> <span>电话:</span>
            <div><el-input size="small" style="width: 130px;" v-model="input" placeholder="请输入内容"></el-input></div>
          </div>
          <div class="container-button"> <span>身份证:</span>
            <div><el-input size="small" style="width: 130px;" v-model="input" placeholder="请输入内容"></el-input></div>
          </div>
          <div class="container-button"> <span>车牌号:</span>
            <div><el-input size="small" style="width: 130px;" v-model="input" placeholder="请输入内容"></el-input></div>
          </div>
          <div class="container-button"> <span>时间:</span>
            <div>
              <div class="block">
                <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </div>
            </div>
          </div>
          <div >
           <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button>
            <el-button type="primary" icon="el-icon-folder-add" size="small">重置</el-button>
          </div>
        </div>

      </template>
    </tableItem>
  </div>
</template>

<script>
import tableItem from '@/components/table/index.vue'
export default {
  components: { tableItem },
  props: {},
  data() {
    return {
      input: '',
      tableData: [
        {
          id: '1',
          order: '4324rwert6456',
          count: '3',
          price: '45',
          pay: '微信支付',
          qudao: '窗口',
          spr: '张三',
          lxr: '李四',
          phone: 19987895454,
          time: '2024-01-01',
          timey: '2024-04-11',
          timez: '2024-07-01'
        }
      ],
      biaotou: [
        {
          prop: 'id',
          label: 'id',
          width: 150,
          fixed: true
        },
        {
          prop: 'order',
          label: '订单号',
          width: 150,
          fixed: true
        },
        {
          prop: 'count',
          label: '人数',
          width: 120
        },
        {
          prop: 'price',
          label: '价格',
          width: 120
        },
        {
          prop: 'pay',
          label: '支付方式',
          width: 150
        },
        {
          prop: 'qudao',
          label: '销售渠道',
          width: 120
        },
        {
          prop: 'spr',
          label: '收票人',
          width: 150
        },
        {
          prop: 'lxr',
          label: '联系人',
          width: 120
        },
        {
          prop: 'phone',
          label: '联系电话',
          width: 120
        },
        {
          prop: 'time',
          label: '下单时间',
          width: 120
        },
        {
          prop: 'timey',
          label: '游玩时间',
          width: 120
        },
        {
          prop: 'timez',
          label: '订单状态',
          width: 120
        }
      ],
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      value: '',
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)]
    }
  },
  created() {},
  mounted() {},
  methods: {},
  watch: {},
  computed: {}
}
</script>

<style lang="scss" scoped>
.container-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: center;
}
.container-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: 20px;
}

</style>
